<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.img{
				animation: dfc .8s linear infinite;
			}
			@keyframes dfc{
				0%{
					transform: rotate(180deg);
				}
				30%{
					transform: rotate(360deg);
				}
				100%{
					transform: rotate(720deg);
				}
			}
			.imgb{
				animation: dfcs .8s linear infinite;
			}
			@keyframes dfcs{
				0%{
					transform: translate(0px) rotateX(180deg);
				}
				20%{
					transform: translate(300px) rotateX(360deg);
				}
				40%{transform: translate(600px) rotateX(720deg);
				}
				60%{transform: translate(800px) rotateX(900deg);
				}
				80%{transform: translate(1000px) rotateX(1080deg);
				}
				100%{transform: translate(1200px) rotateX(1260deg);
				}
			}
			
		</style>
	</head>
	<body>
		<img src="../img/2.gif" alt="" />
		
		<br />
		<button class="start">开转</button>
		<button class="stop">暂停</button>
		<button class="rotate">旋转</button>
		<audio src="../dafengche.mp3" autoplay></audio>
		<script>
		$(".start").click(function(){
			$("img").attr("src","../img/dfc.jpg");
		});
		$(".start").click(function(){
			$("img").addClass("img");
		});
		$(".stop").click(function(){
			$("audio").removeAttr("src");
			$("img").removeClass("img");
		});
		$(".rotate").click(function(){
			$("img").toggleClass("imgb");
			$("audio").attr("src","../dafengche.mp3");
		});
		</script>
	</body>
</html>